<template>
  <div style="height: 100%">
    <div style="height: 10%">
      <el-button type="primary" @click="handleList()"
        >总数 {{ caseResp.length }}</el-button
      >
      <el-button type="success" @click="handleTrue()"
        >通过 {{ successT.length }}</el-button
      >
      <el-button type="danger" @click="handleFail()"
        >失败 {{ successF.length }}</el-button
      >
      <el-button type="primary" plain disabled>通过率 {{ rate }}</el-button>
    </div>
    <div style="height: 85%">
      <el-table
        :data="caselist"
        ref="filterTable"
        height="100%"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline>
              <el-form-item label="请求参数：">
                <span>{{
                  props.row.case_request_data || "空"
                }}</span> </el-form-item
              ><br />
              <el-form-item label="接口响应结果：">
                <span>{{ props.row.response }}</span> </el-form-item
              ><br />
              <!-- <span v-if="props.row.response.includes('{')">
                  <json-viewer
                    :value="JSON.parse(props.row.response)"
                    expand-depth="4"
                    expanded
                    boxed
                    theme="jv-light"
                  ></json-viewer>
                </span>
                <span v-else>{{
                  props.row.response || "空"
                }}</span> </el-form-item
              ><br /> -->
              <el-form-item label="接口预期结果：">
                <span>{{ props.row.case_check || "空" }}</span> </el-form-item
              ><br />
              <!-- <span v-if="props.row.case_check.includes('{')">
                  <json-viewer
                    :value="JSON.parse(props.row.case_check)"
                    expand-depth="2"
                    expanded
                    boxed
                    theme="jv-light"
                    sort
                  ></json-viewer>
                </span>
                <span v-else>{{ props.row.case_check }}</span> </el-form-item
              ><br /> -->
              <el-form-item label="数据库实际结果：">
                <span>{{ props.row.dbresponse || "空" }}</span> </el-form-item
              ><br />
              <el-form-item label="数据库预期结果：">
                <span>{{
                  props.row.template_check || "空"
                }}</span> </el-form-item
              ><br />
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="用例 ID" prop="case_id"> </el-table-column>
        <el-table-column label="用例名称" prop="case_name"> </el-table-column>
        <el-table-column label="请求方法" prop="case_method"> </el-table-column>
        <el-table-column label="请求地址" prop="case_url"> </el-table-column>
        <el-table-column label="响应状态" prop="responseStatus">
        </el-table-column>
        <el-table-column label="响应时间(秒)" prop="responseTime">
        </el-table-column>
        <el-table-column prop="success" label="接口结果" width="150">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.success == 'false'"
              type="danger"
              effect="dark"
              >失败</el-tag
            >
            <el-tag
              v-else-if="scope.row.success == 'true'"
              type="success"
              effect="dark"
              >通过</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="success" label="数据库结果" width="150">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.dbsuccess == 'false'"
              type="danger"
              effect="dark"
              >失败</el-tag
            >
            <el-tag
              v-else-if="scope.row.dbsuccess == 'true'"
              type="success"
              effect="dark"
              >通过</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style>
</style>
<script>
export default {
  methods: {
    handleFail() {
      this.caselist = this.successF;
    },
    handleList() {
      this.caselist = this.caseResp;
    },
    handleTrue() {
      this.caselist = this.successT;
    },
  },
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      caseResp: this.$route.params.caseresp,
      caselist: this.$route.params.caseresp,
    };
  },
  // 计算环节
  computed: {
    successT() {
      return this.caseResp.filter((item) => item.success == "true");
    },
    successF() {
      return this.caseResp.filter((item) => item.success == "false");
    },
    rate() {
      return (
        ((this.successT.length / this.caseResp.length) * 100).toFixed(2) + "%"
      );
    },
  },
};
</script>
